<template>
  <div>
    <!-- node不支持没做了 -->
    <!-- <pdf src="/public/sxt.pdf"></pdf> -->
     <el-dialog title="查看合同内容" :visible="dialogVisible" width="70%" @close="close">
        <!-- 
        属性：
            src='' pdf路径地址
            page  显示第几页
            $event 获取当前的pdf文件事件对象  
            @num-pages="pageCount = $event"     总页码
            @page-loaded="currentPage = $event" 当前页码
        -->
        <!-- 1. 展示pdf文件  -->
        <!-- <p>{{ currentPage }}/{{ pageCount }}</p> -->
        <!-- <pdf src="/sxt.pdf"   @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf> -->
        <!-- 2. 展示所有pdf -->
        <!-- <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 25%"></pdf> -->
        <!-- 3. 结合分页展示pdf -->
        <!-- <p>{{currentPage}} /{{numPages}}</p> -->
        <el-button v-print="'#printBox'" type="primary">打印合同</el-button>
        <br/><br/>
        <div id="printBox">
          <span class="block" v-for="fit in fits" :key="fit">
          <el-image
            style="width: 100px; height: 100px"
            :src="fit"
            :preview-src-list="srcList"
            ></el-image>
        </span>
        </div>
     </el-dialog>
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
var loadingTask = require('../../../../public/30.jpg')
var loadingTask2 = require('../../../../public/16.jpg')
var loadingTask3 = require('../../../../public/17.jpg')
var loadingTask4 = require('../../../../public/18.jpg')
export default {
  name: 'Vue-pdf',
  components: {
    // pdf
  },
  props: ['dialogVisible'],
  data () {
    return {
       fits: [loadingTask,loadingTask2,loadingTask3,loadingTask4],
            // dialogVisible:false
        srcList:[loadingTask,loadingTask2,loadingTask3,loadingTask4]
    }
  },
  created () {},
  mounted () {
  },
  methods: {
     
        //关闭
        close() {
            // // console.log('关闭弹框');
            //通知父组件修改变量--传递给子组件--- 
            this.$emit('changeDialog')
        }
    }
  }

</script>

<style lang="less" scoped>
  .block{
    margin-left: 10px;
  }
</style>
